<template>
  <div class="fankui">
    <div style="display: flex;align-items:center;">
      <div style="display: flex;align-items:center;">
         <span>任务起止时间:</span>
        <el-date-picker
          v-model="value6"
          type="datetimerange"
          style="width:350px;margin-left:10px;"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </div>
       <div style="display: flex;align-items:center;">
         <span style="width:50px;;margin-left:20px;">订单号:</span>
         <el-input style="width:150px;height:30px;margin-left:10px;" v-model="input" placeholder="请输入内容"></el-input>
       </div>
       <el-button type="primary" size="mini" style="margin-left: 10px;">查询</el-button>
       <div @click="add" style="width:14%;cursor: pointer;display: flex;align-items: center;margin-left:20px;">
        <span style="margin-right:10px;color:#409EFF;">添加账号黑名单</span>
        <img style="width:24px;height:24px;float: right;margin-right:5px;" src="../../assets/adding.png" alt="">
      </div>
    </div>
    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      width="40%">
      <div style="padding: 0 50px">
        <h2 style="border-bottom: 2px solid #ccc; line-height: 60px; margin: 0;">发起反馈</h2>

        <div style="padding-top: 30px;">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item
              label="反馈内容"
              prop="desc"
              :rules="[
              { required: true, message: '内容不能为空'},
              ]">
              <el-input type="textarea" :rows="10" v-model="form.desc" placeholder="欢迎提出你在使用过程中遇到的问题或宝贵的建议（400字以内），感谢你对油菜花的支持。"></el-input>
            </el-form-item>
            <div style="height: 20px;"></div>
            <el-form-item
              label="联系方式"
              prop="name">
              <el-input type="name" v-model="form.name" placeholder="如联系方式与注册账号不同，请留下你的联系方式便于我们与你联系。"></el-input>
            </el-form-item>
            <div style="height: 20px;"></div>
            <el-form-item label="添加图片">
              <el-upload
                class="upload-demo"
                action="http://39.104.83.69:2727/v1/api/other/UploadImg"
                multiple
                :limit="6"
                :on-success="uploadSuccess1"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <span style="color: #9d9c9a;">如有需要可以上传问题截图帮助说明（图片小于3M）</span>
              </el-upload>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消提交</el-button>
        <el-button type="primary" @click="submit1">确认提交</el-button>
      </span>
    </el-dialog>
    <!-- <div style="height: 30px;"></div> -->
    <el-table
      :data="tableData"

      border
      style="width: 100%;margin-top:20px;">
      <el-table-column
        prop="date"
        label="序号"
        align="center"
        width="">
      </el-table-column>
      <el-table-column
        prop="address"
        align="center"
        label="反馈内容"
        width="">
      </el-table-column>
      <el-table-column
        prop="address"
        align="center"
        label="图片"
        width="">
      </el-table-column>
      <el-table-column
        prop="address"
        align="center"
        label="操作"
        width="">
      </el-table-column>
      <el-table-column
        prop="address"
        label="备注"
        align="center"
        width="">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: "AdminFankui",
    data(){
      return{
        images:'',
        tableData: [],
        dialogVisible: false,
        form: {
          name: '',
          desc: ''
        },

        value6:[],
      }
    },
    methods:{
      getRowClass ({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === 0) {
          return 'background:rgb(144,195,252);opacity:0.4;color:white;text-align:center;font-size:9px;font-weight:500;'
        } else {
          return ''
        }
      },
      submit1(){
        let _this = this;
        _this.$http
          .post("/api/api.php", {
            id: "upSjHelp",
            text:_this.form.desc,
            img:_this.images,
            note:_this.form.name
          })
          .then(function (response) {
            _this.dialogVisible = false
          });

      },
      add(){
        this.dialogVisible = true
      },
      uploadSuccess1(a){
        this.images = a.data.url
      }
    },
    created(){

    }
  }
</script>

<style lang="scss">
.fankui {
  .el-button{
    /*height:30px;*/
    // margin-top:9px;
  }
  .el-input__inner{
    height:30px;
    width:100%;
  }
  .el-range-editor.el-input__inner{
    padding:0 10px;
  }
}

</style>
